<template>
    <div>
      <div v-if="showModal">
        <div class="modal" @click.self="$emit('changeShowModal', false)">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header" :style="`background-color: ${modalHeaderColor};`">
                <h4 class="modal-title">{{ modalTitle }}</h4>
                <button type="button" class="close" @click="$emit('changeShowModal', false)">×</button>
              </div>
              <div class="modal-body">
                <p>
                  <icon name="meh-o" scale="1.2"></icon> {{ errMessage in
        staticContent ? staticContent[errMessage][$store.state.language] :message}}
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-backdrop show"></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "NoticeModal",
    props: {
      type: {
        type: String,
        default: "notice"
      },
      message: {
        type: String,
        default: "未知错误"
      },
      showModal: {
        type: Boolean,
        required: true
      },
      errMessage: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        staticContent: {
          "notice": {
            "en": "Notice",
            "zh": "注意",
            "color": "#10AEFF"
          },
          "error": {
            "en": "Error",
            "zh": "错误",
            "color": "#F76260"
          },
          "Empty Result List": {
            "en": "There are no results for the input. Please check the search conditions!",
            "zh": "查不到此条记录，请检查检索条件！"
          },
          "Parse Atoms Error": {
            "en": "Chemical formula parsing error. Please check the spelling of chemical formula!",
            "zh": "化学式解析错误，请检查化学式拼写！"
          },
          "None Param": {
            "en": "The search parameter cannot be blank. Please fill in it completely!",
            "zh": "检索参数不能为空，请填写完整！"
          },
          "Too Many Requests": {
            "en": "Too Many Requests！",
            "zh": "由于您的访问过于频繁，我们怀疑是非法操作，我们将暂停对您的服务，如有问题，请联系（cdsscu@163.com）工作人员"
          },
          "Empty File": {
            "en": "Empty File",
            "zh": "请先上传文件"
          },
          "Not Number": {
            "en": "Empty File",
            "zh": "请核验输入的条件"
          }
        }
      }
    },
    model: {
      prop: 'showModal',
      event: 'changeShowModal'
    },
    computed: {
      modalTitle() {
        return this.staticContent[this.type][this.$store.state.language];
      },
      modalHeaderColor() {
        return this.staticContent[this.type].color;
      }
    }
  }
  </script>
  
  <style scoped>
  .modal {
    display: block;
  }
  
  .modal .modal-dialog {
    margin-top: 20vh;
  }
  
  .modal .modal-dialog .modal-header {
    color: white;
  }
  
  .modal .modal-dialog .modal-header button {
    color: white;
    font-size: 2rem;
  }
  </style>